<!DOCTYPE html>
<html>
<head>
    <title>用户注册</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="lib/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-container" style="width: 500px;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 100px;">
        <legend>用户注册</legend>
    </fieldset>
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text" name="email" autocomplete="off" placeholder="邮箱" class="layui-input emailVal">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-inline">
                <input type="text" name="code" placeholder="验证码" autocomplete="off" class="layui-input code">
            </div>
            <div class="layui-form-mid layui-word-aux pullCode" style="color: green !important;cursor: pointer;">获取验证码
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" autocomplete="off" placeholder="密码" class="layui-input pwdVal">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-inline">
                <input type="password" name="confirmPassword" autocomplete="off" placeholder="密码"
                       class="layui-input rePwd">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn registUser">注册</button>
            </div>
        </div>
    </div>

</div>

<script src="lib/layui/layui.all.js"></script>
<script src="lib/jquery/jquery-3.4.1.min.js"></script>
<script>
    let getCodeTime = 0;
    $(".pullCode").click(function () {
        if (new Date().getTime() - getCodeTime < 60000){
            let number = Number.parseInt((60 - (new Date().getTime() - getCodeTime)/1000));
            layui.layer.msg("获取验证码频繁，请 " + number + "秒后重新获取", {time: 2000})
            return;
        }
        let email = $(".emailVal").val();
        let url = "http://192.168.32.102/api/code/create/" + email
        $.ajax({
            url: url,
            type: "GET",
            success: function (result) {
                if (result) {
                    layui.layer.msg("验证码获取成功", {time: 1000})
                    getCodeTime = new Date().getTime();
                }
            }
        });
    });

    $(".registUser").click(function () {
        let pwd = $(".pwdVal").val();
        if (pwd == "" || !pwd) {
            layui.layer.msg("密码不能为空", {time: 1000})
            return;
        }
        let rePwd = $(".rePwd").val();
        if (pwd != rePwd) {
            layui.layer.msg("两次密码不相同", {time: 1000})
            return;
        }
        let code = $(".code").val();
        let email = $(".emailVal").val();
        let url = "http://192.168.32.102/api/user/register/" + email + "/" + pwd + "/" + code;
        $.ajax({
            url: url,
            type: "GET",
            success: function (result) {
                if (result === true) {
                    window.location.href = "http://192.168.32.102/static/welcome.html";
                }
            }
        });
    });

</script>
</body>
</html>